/**
 * 请假人员排行
 */
import React, { Fragment } from 'react';
import { Row, Col, Form, Table } from 'antd';
import { get as getPath } from 'object-path';
import { QuickForm } from 'vv-frontend-components';
import { formatMessage } from 'umi';
import { connect } from 'umi';
import LinkTo from '@/components/LinkTo';
import { dateConversion } from '@/utils/utils';
import { Pagination } from '@/components';
import style from './reportRank.less';

class Leave extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            typeCode: '',
            columns: [],
            filter: ''
        };
    }

    componentDidMount() {
        this.getTypeListAll();
    }

    handleSubmit = async e => {
        const {
            dispatch,
            reportRank: { paginationLeave: curPagination }
        } = this.props;
        e.preventDefault();
        await dispatch({
            type: 'reportRank/save',
            payload: {
                paginationLeave: {
                    ...curPagination,
                    current: 1
                }
            }
        });
        this.fetchList();
    };

    // 表格表头点击切换排序
    changeTable = async (pagination, filters) => {
        const { filter } = this.state;
        if (filters && filters.leaveTime && filters.leaveTime[0] !== '总请假') {
            this.setState({
                typeCode: filters && filters.leaveTime[0]
            });
        } else {
            this.setState({
                typeCode: ''
            });
        }
        const {
            dispatch,
            reportRank: { paginationLeave: curPagination }
        } = this.props;
        await dispatch({
            type: 'reportRank/save',
            payload: {
                paginationLeave: {
                    ...curPagination,
                    ...pagination
                }
            }
        });
        if (filters && JSON.stringify(filter) !== JSON.stringify(filters)) {
            this.setState({
                filter: filters
            });
            await dispatch({
                type: 'reportRank/save',
                payload: {
                    paginationLeave: {
                        current: 1,
                        pageSize: curPagination.pageSize
                    }
                }
            });
        }
        this.fetchList();
    };

    // 获取列表
    fetchList = async () => {
        const { form, reportRank, dispatch } = this.props;
        const { paginationLeave } = reportRank;
        const { companyDepart, date = { range: [] } } = form.getFieldsValue();
        await dispatch({
            type: 'reportRank/fetchLeaveRank',
            payload: {
                companyCode: companyDepart?.companyId || '',
                departmentCode: companyDepart?.departmentId || '',
                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                pageNo: paginationLeave.current,
                pageSize: paginationLeave.pageSize,
                isLookMore: '2',
                typeCode: getPath(this.state, 'typeCode', '')
            }
        });
        this.setfilters();
    };

    getTypeListAll = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'reportRank/fetchLeaveType',
            callback: () => {
                // this.setfilters();
                this.fetchList();
            }
        });
    };

    // 筛选
    setfilters = () => {
        const {
            reportRank: { leaveType, paginationLeave }
        } = this.props;
        const column = [
            {
                dataIndex: 'id',
                key: 'id',
                render: (text, record, index) => (
                    <p
                        className={
                            index + paginationLeave.pageSize * (paginationLeave.current - 1) < 5
                                ? style.wnP
                                : style.wnOther
                        }
                    >
                        {index + paginationLeave.pageSize * (paginationLeave.current - 1) + 1}
                    </p>
                )
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.userName'
                })}`,
                dataIndex: 'userName',
                key: 'userName',
                render: (text, record) => {
                    const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/leaveRecord"
                            query={{
                                companyCode: companyDepart && companyDepart.companyId ? companyDepart.companyId : '',
                                departmentCode:
                                    companyDepart && companyDepart.departmentId ? companyDepart.departmentId : '',
                                employeeName: record.userName,
                                leaveCode: getPath(this.state, 'typeCode', ''),
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                // dateType: date.type,
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.userName}
                        </LinkTo>
                    );
                }
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.departName'
                })}`,
                dataIndex: 'departName',
                key: 'departName',
                width: 150
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.position'
                })}`,
                dataIndex: 'position',
                key: 'position',
                width: 200
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.allLeave'
                })}`,
                dataIndex: 'leaveTime',
                key: 'leaveTime',
                render: (text, record) => <span>{dateConversion(record.leaveTime, 8)}</span>,
                filters: [],
                filterMultiple: false
            },
            {
                title: `${formatMessage({
                    id: 'stat.absence.action'
                })}`,
                dataIndex: 'action',
                key: 'action',
                render: (text, record) => {
                    const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/leaveRecord"
                            query={{
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                leaveCode: getPath(this.state, 'typeCode', ''),
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {formatMessage({
                                id: 'stat.report.toLeaveDetail'
                            })}
                        </LinkTo>
                    );
                }
            }
        ];

        const arr = [];
        for (let index = 0; index < leaveType.length; index += 1) {
            const list = {
                text: leaveType[index].name,
                value: leaveType[index].name
            };
            arr.push(list);
        }
        column[4].filters = arr;
        this.setState({
            columns: column
        });
    };

    render() {
        const { loading, reportRank, form } = this.props;
        const { leaveData, paginationLeave } = reportRank;
        const { columns } = this.state;

        return (
            <Fragment>
                <Row type="flex" className="searchTitle">
                    <Col>
                        <Form layout="inline" onSubmit={this.handleSubmit}>
                            <QuickForm form={form} config={getPath(this.props, 'config')} />
                        </Form>
                    </Col>
                </Row>
                <Table
                    style={{ marginTop: '12px' }}
                    dataSource={leaveData}
                    columns={columns}
                    loading={loading}
                    rowKey="id"
                    onChange={this.changeTable}
                    pagination={false}
                />
                <Pagination onChange={this.changeTable} {...paginationLeave} loading={loading} />
            </Fragment>
        );
    }
}
export default connect(({ reportRank, loading }) => ({
    reportRank,
    loading: loading.models.reportRank
}))(Form.create()(Leave));
